<template>
  <div class="page main-page-container" 
  v-loading.body="!isInitHeader && isLoading" 
  element-loading-text="拼命加载中" 
  element-loading-customClass="partloading"
  :style="{minHeight:docHeight}">
    <LeftSideBar v-if="user" @sideBarLoaded="isSideBarLoaded = true" ref="leftSideBar"></LeftSideBar>
    <div class="content-body clearfix" 
    v-loading.body="isInitHeader && isLoading" 
    element-loading-text="拼命加载中" 
    element-loading-customClass="partloading"
    :style="[contentStyle]">
      <div class="right-content clearfix" >
        <ELHeader v-if="isInitHeader"></ELHeader>
        <div :style="{marginTop: 56 + 'px'}">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import LeftSideBar from '../components/LeftSideBar'
  import Header from 'components/AdminHeader'
  const zepto  = require('npm-zepto')
  import { mapState, mapActions } from 'vuex'
  import { UPDATE_IS_LOADING } from '../store/mutation-types';

  export default {
    data () {
      return {
        docHeight: window.innerHeight + 'px',
        docWidth: window.innerWidth + 'px',
        contentStyle: {
        },
        init: false,
        isInitHeader: false,
        isSideBarLoaded: false,
        resizeTime: new Date().getTime()
      }
    },
    beforeMount () {
      this.enableLoading()
    },
    components: {
      LeftSideBar,
      ELHeader: Header
    },
    watch: {
      isSideBarLoaded () {
        
      }
    },
    methods: {
      initSize () {
        this.docHeight = window.innerHeight + 'px'
        this.docWidth = window.innerWidth + 'px'
        const leftSideBar = this.$refs.leftSideBar.$el
        this.contentStyle = {
          ...this.contentStyle,
          width: window.innerWidth - leftSideBar.clientWidth - 2 + 'px',
          opacity: 1
        }

        if (!this.init) {
          this.$nextTick(() => {
            this.init = true
            this.initHeader()
            this.$emit('loaded')
          })
        }
      },
      resizeHandler () {
        zepto(window).on('resize.mainPage', () => {
          this.initSize()
        })
      },
      initHeader () {
        this.$nextTick(() => {
          setTimeout(() => {
            this.isInitHeader = true
            this.disableLoading()
          }, 800)
        })
      },
      ...mapActions({
        enableLoading: 'enableLoading', 
        disableLoading: 'disableLoading'
      })
    },
    mounted () {
      this.$nextTick(() => {
        this.initSize()
        this.resizeHandler()
      })      
    },
    destroyed () {
      zepto(window).off('resize.mainPage')
    },
    computed: {
      ...mapState({
        isLoading: state => state.auth.user && state.config.isLoading,
        user: state => state.auth.user
      })
    }
  }
</script>
<style lang="scss">

  .main-page-container {
    width: 100%;
    position: relative;
  }
  .content-body{
    position: relative;
    float: right;
    min-height: 100%;
    height: 100%;
    
    .uploadTitle{
      font-size: 1rem;
      float: left;
      .team{
        display: inline-block;
        margin-left: 10%;
      }
    }
  }
  
  .right-content {
    padding-left: 20px;
    padding-bottom: 100px;
    width: 99%;
    overflow-x: hidden;
    overflow-y: auto;

    .el-tabs__header {
      // margin-bottom: 0;
      overflow: hidden;
    }

    .el-tab-pane {
      // padding-top: 15px;
    }

    .el-tabs__content {
      // height:  30rem;
      overflow-y: auto!important;
    }

    .bread-ico {
      float: left;
      margin-right: 8px;
      margin-top: -8px;
      width: 30px;
    }

    .bread-ico .fa-icon {
      width: 100%;
      height: 100%;
    }
  }
  
</style>
